<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>邀请好友</h3>
			<h4>效益分析</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<table class="layui-table buyer-table-grade" lay-skin="line">
			  	<thead>
				    <tr>
				    	<th>投入张数</th>
				    	<th>投入金额</th>
				    	<th>使用张数</th>
				    	<th>收益比率</th>
				    </tr> 
			 	 </thead>
			  	<tbody>
				    <tr>
				    	<td>2</td>
				    	<td>60</td>
				    	<td>0</td>
				    	<td>0%</td>
				    </tr>
			  	</tbody>
			</table>
		</div>
		
		<div class="marke-echarts">
			<div id="main"></div>
			<div id="main1"></div>
		</div>
		<!--deer-content-->
	</section>
	
	<!--js-->
	<aside>
		<script type="text/javascript" src="../layui/layui.js" ></script>
		<script type="text/javascript" src="../js/echarts.min.js" ></script>
		<script type="text/javascript">
	    var myChart = echarts.init(document.getElementById('main'));
		    option = {
		        color: ['#3398DB'],
		        tooltip : {
		            trigger: 'axis',
		            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		            }
		        },
		        grid: {
		            left: '3%',
		            right: '4%',
		            bottom: '3%',
		            containLabel: true
		        },
		        xAxis : [
		            {
		                type : 'category',
		                data : ['投入优惠券数量', '使用数'],
		                axisTick: {
		                    alignWithLabel: true
		                }
		            }
		        ],
		        yAxis : [
		            {
		                type : 'value'
		            }
		        ],
		        series : [
		            {
		                name:'邀请好友活动',
		                type:'bar',
		                barWidth: '60%',
		                data:[2, 0 ]
		    }
		    ]
		    };
		
		    myChart.setOption(option);
		    var myChart1 = echarts.init(document.getElementById('main1'));
		    option = {
		        title : {
		            text: '邀请好友活动',
		            subtext: '实时数据',
		            x:'center'
		        },
		        tooltip : {
		            trigger: 'item',
		            formatter: "{a} <br/>{b} : {c} ({d}%)"
		        },
		        legend: {
		            orient: 'vertical',
		            left: 'left',
		            data: ['使用数量','未使用数']
		        },
		        series : [
		            {
		                name: '数据来源',
		                type: 'pie',
		                radius : '55%',
		                center: ['50%', '60%'],
		                data:[
		                    {value:0, name:'使用数量'},
		                    {value:2, name:'未使用数'},
		                ],
		                itemStyle: {
		                    emphasis: {
		                        shadowBlur: 10,
		                        shadowOffsetX: 0,
		                        shadowColor: 'rgba(0, 0, 0, 0.5)'
		                    }
		                }
		            }
		        ]
		    };
		
		    myChart1.setOption(option);
			
			
			
		</script>
		
	</aside>
	<!--js-->
	<script type="text/javascript">
		
	</script>
	
</body>
</html>